<template>
	<div class="container">
		<!-- 面包屑导航 -->
		<div class="breadcrumb">
			<el-breadcrumb separator="">
				<el-breadcrumb-item>
					<div class="div1">订单管理</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item :to='{name:"myCustomers"}'>
					<div class="div3">我的客户</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item>
					<div class="div2">客户订单</div>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑导航 -->
		<div class="inquiry">
			<!-- <div class="header">查询订单</div>					 -->
			<el-form :inline="true" ref="form" :model="queryForm" label-width="" size="mini">
				<el-form-item label="信息">
					<el-input placeholder='请输入客户手机号码/姓名' v-model="queryForm.info"></el-input>
				</el-form-item>
				<div class="selectDate">
					<span>时间</span>
					<div class='picker'>
						<el-date-picker v-model="date" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
						 end-placeholder="结束日期" format="yyyy- MM- dd" value-format="yyyy-MM-dd">>
						</el-date-picker>
					</div>
				</div>

				<!-- 		<el-form-item label="客服">
											<el-select v-model="queryForm.service" placeholder="请选择客服">
											  <el-option v-for='items in customer' :key='items.id' :label="items.reallyName"  :value="items.id"></el-option>        
											</el-select>
									</el-form-item> -->
				<el-form-item label="订单编号">
					<el-input v-model="queryForm.identifier" placeholder='请输入订单编号'></el-input>
				</el-form-item>

				<el-form-item label="订单状态">
					<el-select v-model="queryForm.state" placeholder="选择订单状态">
						<el-option v-for='itemsS in status' :key='itemsS.dictId' :label="itemsS.dictName" :value="itemsS.dictId"></el-option>
					</el-select>
				</el-form-item>
				<!-- <div class="box"> -->

				<!-- 	<el-form-item label="地区">
											  <v-distpicker :province="queryForm.province" :city="queryForm.city"  :area="queryForm.area" 
													@province="onChangeProvince1" @city="onChangeCity"  @area="onChangeArea">
											  </v-distpicker> -->
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click='listAxios(1)'>搜索</el-button>
					<el-button plain @click='reset'>重置</el-button>
				</el-form-item>
				<!-- </div> -->
			</el-form>
		</div>

		<div class="table">
			<el-table ref="multipleTable" :data="tableData.list" style="width: 100%" :expand-row-keys="expends" :row-key="getRowKeys">
				<el-table-column type='index' label="序号" width="50"></el-table-column>
				<el-table-column type="expand" :show-overflow-tooltip="true">
					<template slot-scope="props">
						<div @click='toDetail(props.row)'>
							<el-form class="demo-table-expand">
								<el-form-item>
									<p v-for='items in props.row.orderCommodityList' :key='items.id'>
										<span>{{items.name}}</span>
										<span> {{items.price}} × {{items.number}} = {{items.total}} 元</span>
									</p>
								</el-form-item>
								<el-form-item v-if='!is_null(props.row.orderComplimentaryList)'>
									<span style='color:red'>附属品：</span>
									<p class='complimentary' v-for='items in props.row.orderComplimentaryList' :key='items.id'>
										<span>{{ items.complimentaryName }}</span>
								 	<span> {{items.price}} × {{items.number}} = {{items.total}} 元</span>
									</p>
								</el-form-item>
							</el-form>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="订单编号">
					<template slot-scope="props">
						<el-tooltip class="item" effect="dark" content="单击复制" placement="top">
							<p style="cursor: pointer;" @click="copyButton(props.row)">
								{{ props.row.orderUser.orderIdStr }}
							</p>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="下单时间" prop="orderUser.createdTime"></el-table-column>
				<el-table-column label="客户" prop="orderUser.addressName" width="150"></el-table-column>
				<el-table-column label="订单状态">
					<template slot-scope="props">
						<p>
							{{
                    !orderTypeSelf[props.row.orderUser.orderType]
                      ? props.row.orderUser.orderType
                      : orderTypeSelf[props.row.orderUser.orderType]
                  }}
						</p>
						<p>销售：{{ props.row.orderUser.employeeName }}</p>
					</template>
				</el-table-column>
				<el-table-column label="总计">
					<template slot-scope="props">
						<p>总价：￥{{ props.row.orderUser.total }}</p>
						<p>已收：￥{{ props.row.orderUser.receivedMoney}}</p>
						<p>待收：￥{{ props.row.orderUser.awaitIncomeMoney }}</p>
					</template>
				</el-table-column>
				<el-table-column label="备注" :show-overflow-tooltip="true">
					<template slot-scope="props">
						<span v-if='is_null(props.row.orderUser.comment)'>--</span>
						<span v-if='!is_null(props.row.orderUser.comment)'>{{props.row.orderUser.comment}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="props">
						<div class="btn">
							<!-- <span  v-if='props.row.orderUser.createdBy == user_id' @click='fixOrder(props.row)'>修改</span> -->
							<span @click="againdOrder(props.row)">复购订单</span>
							<!-- 只有员工有删除 -->
							<span @click='toDetail(props.row)'>详情</span>
							<!-- <span v-if='props.row.orderUser.createdBy != user_id' @click="trueEvent(props.row);">办理</span> -->
							<!-- 员工没有办理 -->
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页start -->
			<div class="page">
				<div class="block">
					<span class="demonstration">共{{tableData.totalPage}}页</span>
					<span class="demonstration">共{{tableData.totalNum}}条</span>
					<el-pagination background='' @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="1"
					 layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="tableData.totalPage">
					</el-pagination>
				</div>
			</div>
			<!-- 分页end -->
		</div>
	</div>
</template>

<script>
// import VDistpicker from 'v-distpicker';
export default {
  // components:{VDistpicker},
  data () {
    return {
      date: "",
      expends: [],
      id: "",
      queryForm: {
        info: "",
        state: "",
        type: "",
        identifier: "",
        province: "",
        city: "",
        area: "",
        service: "",
      },
      orderTypeSelf: {
        订单待提交审核: "订单待提交",
        组长审批: "等待组长审批",
        经理审批: "等待经理审批",
        "物流审批-待备货": "等待物流审批(待备货)",
        "物流审批-已备货": " 等待物流审批(已备货)",
        订单已审核结束: "待发货",
        待签收: "待签收",
        已签收: "已签收",
        订单已结束: "待发货",
        关闭: "关闭",
        交易关闭: "交易关闭",
      },
      currentPage1: 1,
      tableData: [],
      expandRowKeys: [],
      customer: [],
      status: [],
      beginTime: "",
      endTime: "",
    };
  },
  created () {
    this.id = this.$route.query.id;
    this.listAxios("1");
    this.customerlist();
    this.orderStatus();
  },
  methods: {
    copyButton (row) {
      let that = this;
      that.$copyText(row.orderUser.orderIdStr).then(
        function (e) {
          that.$message({
            type: "success",
            message: "成功复制订单编号",
          });
        },
        function (e) {
          that.$message({
            type: "warning",
            message: "复制失败",
          });
        }
      );
    },
    // 再次购买
    againdOrder (row) {
      this.$router.push({
        name: "add_order",
        query: {
          userId: row.orderUser.userId,
          receivedMoney: row.orderUser.receivedMoney,
          total: row.orderUser.total,
        },
      });
      // 处理商品
      let orderCommodityList = row.orderCommodityList;
      let goodsList = [];
      for (let i = 0; i < orderCommodityList.length; i++) {
        console.log(orderCommodityList[i]);
        let assignment = {
          createdTime: orderCommodityList[i].createdTime,
          id: orderCommodityList[i].commodityId,
          number: orderCommodityList[i].number,
          sellPrice: orderCommodityList[i].price,
          specificationName: orderCommodityList[i].specificationName,
          title: orderCommodityList[i].name,
          total: orderCommodityList[i].total,
          brandId: orderCommodityList[i].brandName,
          typeId: orderCommodityList[i].typeName,
        };
        goodsList.push(assignment);
      }

      // 处理赠品列表
      console.log(row);
      let gift = row.orderComplimentaryList;
      let giftList = [];
      if (!this.is_null(gift)) {
        for (let i = 0; i < gift.length; i++) {
          console.log(gift[i]);
          let giftdata = {
            createdTime: gift[i].createdTime,
            id: gift[i].complimentaryId,
            number: gift[i].number,
            sellPrice: gift[i].price,
            specificationName: gift[i].specificationName,
            title: gift[i].complimentaryName,
            total: gift[i].total,
            brandId: gift[i].brandName,
            categoryId: gift[i].typeName,
          };
          giftList.push(giftdata);
        }
      }
      sessionStorage.setItem("goodsList", JSON.stringify(goodsList));
      sessionStorage.setItem("giftList", JSON.stringify(giftList));
    },
    //设置table中的扩展项，展开的id，此处我需要全部展开
    getExpends () {
      var Id = this.tableData.list.map((item) => item.orderUser.id);
      this.expends = Id;
    },
    getRowKeys (row) {
      return row.orderUser.id;
    },
    listAxios (pageNo) {
      if (this.date) {
        this.beginTime = this.date[0] + " 00:00:00";
        this.endTime = this.date[1] + " 23:59:59";
      }
      this.axios
        .post("/order/order/user/all", {
          addressName: "",
          customerId: "",
          clientId: this.id,
          dataScope: "",
          endTime: this.endTime,
          keyword: this.queryForm.info,
          orderId: this.queryForm.identifier,
          orderType: this.queryForm.state,
          pageNo: pageNo,
          pageSize: 8,
          role: "",
          startTime: this.beginTime,
          userId: "",
          userType: "",
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
            this.getExpends();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    toDetail (row) {
      this.$router.push({
        name: "orderDetail",
        query: {
          orderId: row.orderUser.orderIdStr,
          orderStatus: row.orderUser.orderStatus,
          title: true,
        },
      });
    },
    handleCurrentChange (val) {
      this.listAxios(`${val}`);
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          "/sys/v1/user/employee/by/sales/authority?salesAuthorityId=" +
          JSON.parse(sessionStorage.getItem("salesAuthorityId").split(",")),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 订单状态
    orderStatus () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "order_type", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('订单状态')
          // console.log(res);
          if (res.code == 0) {
            this.status = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 重置搜索数据
    reset () {
      this.date = "";
      this.beginTime = "";
      this.endTime = "";
      this.queryForm = {
        info: "",
        state: "",
        type: "",
        identifier: "",
        province: "",
        city: "",
        area: "",
        service: "",
      };
      this.listAxios("1");
    },
    is_null (content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.characteristic {
  color: #ff0000;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/ .expanded {
  background: #ebf0f9;
  color: #000;
}

/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 50px;
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
}

.inquiry {
  background: #fff;
  padding: 10px 10px 0 10px;

  .el-form {
    margin-top: 10px;
  }
}

/deep/.el-table__expand-icon > .el-icon {
  color: #ccc;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.table {
  margin: 20px 0;

  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }

  /deep/ .el-button {
    padding: 8px 10px;
  }
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.operation {
  display: inline-block;
  margin-left: 20px;

  img {
    width: 20px;
    height: 20px;
  }
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.page {
  margin: 20px 0;
  text-align: right;
  width: 100%;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  text-align: left;
}

/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}

.btn {
  span {
    display: inline-block;
    color: rgb(45, 125, 223);
    margin-right: 10px;
  }
}

.btn:hover {
  cursor: pointer;
}
</style>
